<template>
  <div class="wrapper">
    <div class="main-content">
      <el-row :gutter="16">
        <el-col :md="11" :sm="24" :xs="24">
          <img alt="" :src="img" class="img" draggable="false" />
        </el-col>
        <el-col :md="13" :sm="24" :xs="24">
          <div class="right">
            <page-title class="title" title='FEEDBACK' subtitle="REVIEW"/>
            <el-carousel height="250px" indicator-position="none" ref="carouse" arrow="never">
              <el-carousel-item v-for="item in data" :key='item.id'>
                <testimonial-part v-bind="item" content=""/>
              </el-carousel-item>
            </el-carousel>
            <div class="btnWrapper">
              <el-button type="text" class="btn" @click="pre">
                <i class="el-icon-arrow-left"/>
              </el-button>
              <i class="icon el-icon-s-check"/>
              <el-button type="text" class="btn" @click="next">
                <i class="el-icon-arrow-right"/>
              </el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import img from '@img/clients/testimonial.jpg'
import PageTitle from '@/views/part/index/PageTitle'
import PageTestimonialPart from '@/views/part/index/PageTestimonialPart'

export default {
  name: 'PageTestimonial',
  components: {
    'page-title': PageTitle,
    'testimonial-part': PageTestimonialPart
  },
  data () {
    return {
      img: img,
      data: [{
        id: '1',
        title: 'Emma Westren1',
        customer: 'Customer',
        content: '“ There are many variations of passages of available the majority have suffered ' +
          "alteration in some form, by injected humour, or randomised words slightly believable there isn't anything. ”"
      }, {
        id: '2',
        title: 'Emma Westren2',
        customer: 'Customer',
        content: '“ There are many variations of passages of available the majority have suffered ' +
          "alteration in some form, by injected humour, or randomised words slightly believable there isn't anything. ”"
      }, {
        id: '3',
        title: 'Emma Westren3',
        customer: 'Customer',
        content: '“ There are many variations of passages of available the majority have suffered ' +
          "alteration in some form, by injected humour, or randomised words slightly believable there isn't anything. ”"
      }, {
        id: '4',
        title: 'Emma Westren4',
        customer: 'Customer',
        content: '“ There are many variations of passages of available the majority have suffered ' +
          "alteration in some form, by injected humour, or randomised words slightly believable there isn't anything. ”"
      }, {
        id: '5',
        title: 'Emma Westren5',
        customer: 'Customer',
        content: '“ There are many variations of passages of available the majority have suffered ' +
          "alteration in some form, by injected humour, or randomised words slightly believable there isn't anything. ”"
      }, {
        id: '6',
        title: 'Emma Westren6',
        customer: 'Customer',
        content: '“ There are many variations of passages of available the majority have suffered ' +
          "alteration in some form, by injected humour, or randomised words slightly believable there isn't anything. ”"
      }]
    }
  },
  methods: {
    next () {
      this.$refs.carouse.next()
    },
    pre () {
      this.$refs.carouse.prev()
    }
  }
}
</script>

<style lang="scss" scoped>

  .main-content{
    max-width: 1110px;
    width: 100%;
    margin: 0 auto;
    text-align: left;
  }

  .right{
    width: 100%;
    height: 100%;
    padding: 50px;
  }

  .wrapper{
    background: rgb(252, 252, 252);
    width: 100%;

    .img{
      width: 500px;
      height: 500px;
      margin: auto;
    }

    .btnWrapper{
      font: normal normal normal 14px/1 FontAwesome;
      color: #b3b3b3;
      font-size: 20px;
      font-weight: 700;

      .icon{
        margin: 0 20px;
      }

      .btn{
        color: #b3b3b3;
        font-size: 20px;
      }

      .btn:hover{
        color: #333333 !important;
      }

    }

  }

</style>
